Components Basics

Introduction

This page explains the basic properties that are shared across all components.
Here, you get a brief overview.
Component-specific properties are described on the individual component pages in the documentation.

Basic Structure of Components

Every component in yeet behaves as a flex item inside a flex container, which makes it easy to build responsive layouts.
For more details, see the Layout System section.

Each component follows the same basic structure:

• A component can have multiple states: normal, hover, active, focus, disabled, error, readonly.
• Each state can have its own background color.
• Each state can have its own border.
• Each component can define its own spacing to its content and to neighboring components.
  See the Spacing section for more information.

Basic Properties

The following properties are available on every component.

Generic

METAread more

Name: componentId

Not Editable

Number Property

--y-base__component-id

The identifier of the component that is unique within a page.

Name: componentType

Not Editable

String Property

--y-base__component-type

The type of the component. For this component it is -base.

Name: name

String Property

--y-base__name

The custom name of the component. It serves for better identification of the component.

Name: version

String Property

--y-base__version

The custom version of the Base-component. This can be used to ensure that all components work well together.

Name: coreTheme

String Property

--y-base__core-theme

The CoreTheme, which will be apllied to the Base. For further information on themes visit the themes page.

Name: subTheme

String Property

--y-base__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the Base. For further information on themes visit the themes page.

Name: groupTheme

String Property

--y-base__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more

Name: display

String Property

--y-base__display

This property specifies the display behavior of the component. This can be be set to:

• none
• block
• flex
• inline

Name: position

Not Editable

String Property

--y-base__position

This property specifies the type of positioning method used for the component. This can be be set to:

• static
• relative
• absolute
• sticky
• fixed

Name: visible

String Property

--y-base__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more

Name: minWidth

Injectable

UnitNumber Property

--y-base__min-width

The minimum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: minHeight

Injectable

UnitNumber Property

--y-base__min-height

The minimum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: width

Injectable

UnitNumber Property

--y-base__width

The value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: height

Injectable

UnitNumber Property

--y-base__height

The value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: maxWidth

Injectable

UnitNumber Property

--y-base__max-width

The maximum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: maxHeight

Injectable

UnitNumber Property

--y-base__max-height

The maximum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: flex

String Property

--y-base__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more

Name: marginTop

Injectable

UnitNumber Property

--y-base__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight

Injectable

UnitNumber Property

--y-base__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom

Injectable

UnitNumber Property

--y-base__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft

Injectable

UnitNumber Property

--y-base__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop

Injectable

UnitNumber Property

--y-base__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight

Injectable

UnitNumber Property

--y-base__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom

Injectable

UnitNumber Property

--y-base__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft

Injectable

UnitNumber Property

--y-base__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Style

BACKGROUNDread more

Name: bgColor

Injectable

Color Property

--y-base__bg-color

--y-base__bg-color__normal

--y-base__bg-color__hover

The color of the background. This can be set as a color from a palette or a custom hex color.

BORDERread more

Name: borderTopColor

Injectable

Color Property

--y-base__border-top-color

--y-base__border-top-color__normal

--y-base__border-top-color__hover

The color of the top border. This can be set as a color from a palette or a custom hex color.

Name: borderTopStyle

Injectable

String Property

--y-base__border-top-style

--y-base__border-top-style__normal

--y-base__border-top-style__hover

The style of the top border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderTopWidth

Injectable

UnitNumber Property

--y-base__border-top-width

--y-base__border-top-width__normal

--y-base__border-top-width__hover

The width of the top border. This can be set in percent or pixels.

Name: borderRightColor

Injectable

Color Property

--y-base__border-right-color

--y-base__border-right-color__normal

--y-base__border-right-color__hover

The color of the right border. This can be set as a color from a palette or a custom hex color.

Name: borderRightStyle

Injectable

String Property

--y-base__border-right-style

--y-base__border-right-style__normal

--y-base__border-right-style__hover

The style of the right border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderRightWidth

Injectable

UnitNumber Property

--y-base__border-right-width

--y-base__border-right-width__normal

--y-base__border-right-width__hover

The width of the right border. This can be set in percent or pixels.

Name: borderBottomColor

Injectable

Color Property

--y-base__border-bottom-color

--y-base__border-bottom-color__normal

--y-base__border-bottom-color__hover

The color of the bottom border. This can be set as a color from a palette or a custom hex color.

Name: borderBottomStyle

Injectable

String Property

--y-base__border-bottom-style

--y-base__border-bottom-style__normal

--y-base__border-bottom-style__hover

The style of the bottom border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderBottomWidth

Injectable

UnitNumber Property

--y-base__border-bottom-width

--y-base__border-bottom-width__normal

--y-base__border-bottom-width__hover

The width of the bottom border. This can be set in percent or pixels.

Name: borderLeftColor

Injectable

Color Property

--y-base__border-left-color

--y-base__border-left-color__normal

--y-base__border-left-color__hover

The color of the left border. This can be set as a color from a palette or a custom hex color.

Name: borderLeftStyle

Injectable

String Property

--y-base__border-left-style

--y-base__border-left-style__normal

--y-base__border-left-style__hover

The style of the left border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderLeftWidth

Injectable

UnitNumber Property

--y-base__border-left-width

--y-base__border-left-width__normal

--y-base__border-left-width__hover

The width of the left border. This can be set in percent or pixels.

Name: borderRadius

Injectable

UnitNumber Property

--y-base__border-radius

The radius of the corners of all the borders. This can be set in percent or pixels.

SHADOWread more

Name: boxShadow

Injectable

String Property

--y-base__box-shadow

--y-base__box-shadow__normal

--y-base__box-shadow__hover

The shadow of the component. This is set by the 4 sub-properties x, y, blur and spread of the shadow-property, which can be further read about in the shadow-property section.

OPACITYread more

Name: opacity

Injectable

Number Property

--y-base__opacity

--y-base__opacity__normal

--y-base__opacity__hover

The opacity of all colored parts of the component. This value is set in percent.

Generic

Generic > Meta

The meta group contains abstract properties that do not directly influence the visual appearance or layout of the component.
These properties can only be edited in the Detail Panel.

componentID

NumberProperty

componentID is the unique identifier of a component within a page. It is used for:

• addressing components in functions,
• modifying the component configuration via JavaScript,
• linking event functions to a component.

info

This property is read-only and is assigned by the system.

componentType

StringProperty

componentType is the type of the component (e.g. yButton, yLabel, yTable).
Together with the componentID, it uniquely identifies a component instance.

Typical uses:

• providing meta information,
• checking that a function addresses the correct component type.

In the Components section of the documentation sidebar you can find a list of all available component types.

info

This property is read-only and is assigned by the system.

name

StringProperty

name is a custom label for the component.
It helps you identify components more easily in the UI designer and configuration dialogs.

version

warning

This property is no longer required and will be removed in a future version.

coreTheme

StringProperty

A component is styled via a CoreTheme and its related SubThemes.

• The coreTheme selects which CoreTheme the component belongs to.
• A CoreTheme can contain multiple SubThemes and additional theme data.

To apply a theme:

1. Select a coreTheme.
2. Select a matching subTheme that contains the component styles.

See the Theming section for more information.

subTheme

StringProperty

When a coreTheme is selected, subTheme chooses the specific SubTheme that defines the concrete styles for this component.

groupTheme

StringProperty

groupTheme is intended to select specific component variations within a SubTheme.

warning

This functionality is not yet fully implemented.

---

Generic > Display

The display group contains properties that control how the component is rendered and arranged relative to neighboring components.

display

ListProperty

Defines the display behavior of the component. Possible values include:

• none
• block
• flex
• inline

Some detailed behavior depends on the chosen display mode.
For example, when flex is selected, you can configure further options via the flex-related properties.

position

ListProperty

Specifies the CSS positioning mode of the component.
Currently, only static is supported.

A position is defined by top, bottom, left and right values.
The meaning of these values depends on the selected positioning mode.

info

Additional modes such as relative, absolute, sticky and fixed are planned for the future.

visible

ListProperty

Controls the visibility of the component. Possible values:

• inherit
  Visibility is inherited from a parent component.
• hidden
  The component is invisible but still takes up layout space.
• visible
  The component is visible.

This setting only hides the rendered element.
If you want to prevent the component from being rendered at all, set display to none.

---

Generic > Size

Sizing

The sizing group contains the properties that define the dimensions of the component.

You can:

• set explicit width and height values, or
• rely on the flex layout, where you primarily configure min and max sizes and let flex distribute space.

These properties allow you to precisely control the size of a component as well as minimum and maximum limits:

• width
  Explicit width of the component.
• maxWidth
  Maximum width the component is allowed to have.
• minWidth
  Minimum width the component must have.
• height
  Explicit height of the component.
• maxHeight
  Maximum height the component is allowed to have.
• minHeight
  Minimum height the component must have.

flex

StringProperty

Defines how much available space the component receives in relation to other flex items inside the same container.

• The value is interpreted as a relative share compared to siblings.
• It works best in combination with minWidth, maxWidth, minHeight, and maxHeight to define lower and upper bounds.

---

Generic > Placement

The placement group contains properties that influence distances:

• outside the component (to neighboring components),
• inside the component (between border and content).

info

For more information, see

BoxModel and Placement basics

margin

Defines the outer spacing between the component’s border and surrounding elements.

• marginTop
  Margin at the top of the component.
• marginRight
  Margin on the right side of the component.
• marginBottom
  Margin at the bottom of the component.
• marginLeft
  Margin on the left side of the component.

padding

Defines the inner spacing between the component’s content and its border.

• paddingTop
  Padding at the top of the component.
• paddingRight
  Padding on the right side of the component.
• paddingBottom
  Padding at the bottom of the component.
• paddingLeft
  Padding on the left side of the component.

Style

The Style category contains properties that define the look and feel of the component.
Some are shared between all components, others are specific to certain components.
This section focuses on the general style properties.

Style > Background

The background group collects properties that affect the component’s background.

bgColor

ColorProperty

Defines the background color of the component. You can:

• reference a color from a palette, or
• set a custom hex color.

Each component state can use its own background color.

Style > Border

The border group contains properties that influence the appearance of the component’s border.
Some properties address individual sides (top, right, bottom, left), others affect all sides at once.

color

Sets the border color per edge.
Each state can use its own set of colors.

Property names:

• borderTopColor
  Color of the top border.
• borderRightColor
  Color of the right border.
• borderBottomColor
  Color of the bottom border.
• borderLeftColor
  Color of the left border.

style

Defines the style of the border, for example solid, dashed, or dotted.

Property names:

• borderTopStyle
  Style of the top border.
• borderRightStyle
  Style of the right border.
• borderBottomStyle
  Style of the bottom border.
• borderLeftStyle
  Style of the left border.

width

Defines the width of the border.

Property names:

• borderTopWidth
  Width of the top border.
• borderRightWidth
  Width of the right border.
• borderBottomWidth
  Width of the bottom border.
• borderLeftWidth
  Width of the left border.

borderRadius

Defines the rounding of the component’s corners.
This applies to all states and all four corners.

Style > Shadow

The shadow group contains properties that control the component’s outer shadow.
For most components, you will primarily work with the boxShadow property.

In this example, the values were: x = 50, y = 50, blur = 0, spread = 0.
The x and y offsets move the shadow:

• positive x → shadow moves to the right,
• negative x → shadow moves to the left,
• positive y → shadow moves downward,
• negative y → shadow moves upward.

All values are in pixels.

Here, the values are: x = 50, y = 50, blur = 5, spread = 0.

• blur (in pixels) controls how soft the shadow appears.
• Larger values produce a more intense blur.
• blur must be non-negative.

Here, the values are: x = 50, y = 50, blur = 5, spread = 30.

• spread (in pixels) controls the size of the shadow area.
• A positive value makes the shadow larger than the component.
• A negative value makes the shadow smaller.

boxShadow

StringProperty

The boxShadow property represents the combined shadow configuration.
It is derived from the x, y, blur, and spread parameters in the shadow editor.

Style > Opacity

The opacity group contains properties that affect transparency.

opacity

NumberProperty

Controls the opacity of all colored parts of the component.

• The value is given in percent.
• A lower value makes the component more transparent.

Events

The Events category contains everything related to component events:

• custom function calls,
• remote procedure calls,
• lifecycle hooks.

Events > Lifecycle

This group allows you to manage events tied to the component’s lifecycle.

EvtInit

EvtInit opens the editor for defining the init function of the component.

Within this editor, you can write custom JavaScript that is executed once the component is fully mounted and ready.